import Taro, { Component } from '@tarojs/taro'
import { Image, Swiper, SwiperItem, View } from '@tarojs/components'
import { APP_SYSTEM_INFO } from '@/config/config'
import { toAnyPage, toNewsListPage, toSearchPage } from "@/utils/page_router"
// import NavGroup from "@/components/custom-layout/nav-group"
// import CarouselOne from "@/components/custom-layout/carousel"
import GoodsOne from "@/components/custom-layout/goods-one"
import GoodsTwo from "@/components/custom-layout/goods-two"
import GoodsThree from "@/components/custom-layout/goods-three"
import GoodsFour from "@/components/custom-layout/goods-four"
import GoodsFive from "@/components/custom-layout/goods-five"
import GoodsSix from "@/components/custom-layout/goods-six"
import GoodsSeven from "@/components/custom-layout/goods-seven"
import GridImg from "@/components/custom-layout/grid-img"
import BlankSpace from "@/components/custom-layout/blank-space"
import AuxiliaryLine from "@/components/custom-layout/auxiliary-line"
import './index.scss'

const { capsule, navBarHeight } = APP_SYSTEM_INFO
export default class CustomHome extends Component {
  props: any

  static options = {
    addGlobalClass: true
  }

  render() {
    const { list=[], opacity=0 } = this.props
    return (<View className='custom-page'>
      {list.map((item, k) => {
        const { marginTop=0, pageMargin=0 } = item
        return (<View key={k} className='custom-it-em'>

          {/* ****************************** 基础组件 ****************************** */}

          {/* 顶部导航栏 */}
          {item.key === 'navBar' && !item.isOpacity ? <View style={{ height: `${navBarHeight}px` }}/> : null}
          {item.key === 'navBar' && <View className='fy-popup fy-popup--top nav-bar' style={{ height: `${navBarHeight}px`, background: `rgba(255, 255, 255, ${item.isOpacity ? opacity : 1})` }}>
            <View className='nav-bar__area d-f a-i-c' style={{ width: `${capsule.left}px`, height: `${capsule.height}px`, top: `${capsule.top}px`, opacity: item.isOpacity ? opacity : 1 }}>
              {item.img && <Image src={item.img} className='nav-bar__logo'/>}
              <View className='nav-bar__input d-f a-i-c' onClick={() => toSearchPage()}>
                <View className='input-prefix bnn-icon m-r-10'>&#xe65c;</View>
                <View className='input-placeholder'>搜索好物</View>
              </View>
            </View>
          </View>}

          {/* 轮播图 */}
          {/*{item.key === 'carousel' && <CarouselOne { ...item } />}*/}

          {/* 导航组 */}
          {/*{item.key === 'navGroup' && <NavGroup { ...item }/>}*/}

          {/* 商品列表模板1 */}
          {item.key === 'goodsList' && [2, 3, 4, 5, 6, 7].indexOf(Number(item.showMod)) >= 0 && <View className='goods-wrap goods-wrap__one'>
            {item.title && <View className='goods-wrap__head d-f a-i-b j-c-b' style={{ padding: `0 ${pageMargin}rpx`, marginTop: `${marginTop}rpx` }}>
              <View className='goods-wrap__title'>{item.title}</View>
              <View className='goods-wrap__more d-f a-i-c' onClick={() => toAnyPage(item.moreUrl)}>
                {item.moreName}
                <View className='bnn-icon'>&#xe866;</View>
              </View>
            </View>}
            {item.coverImg && <View className='goods-wrap__cover-img'>
              <Image mode="widthFix" src={item.coverImg} onClick={() => toAnyPage(item.coverUrl)}/>
            </View>}
            <View className='goods-wrap__body'>
              {/* 商品列表2 */}
              {item.showMod === 2 && <GoodsTwo { ...item }/>}
              {/* 商品列表3 */}
              {item.showMod === 3 && <GoodsThree { ...item }/>}
              {/* 商品列表4 */}
              {item.showMod === 4 && <GoodsFour { ...item }/>}
              {/* 商品列表5 */}
              {item.showMod === 5 && <GoodsFive { ...item }/>}
              {/* 商品列表6 */}
              {item.showMod === 6 && <GoodsSix { ...item }/>}
              {/* 商品列表7 */}
              {item.showMod === 7 && <GoodsSeven { ...item }/>}
            </View>
          </View>}

          {/* 商品列表模板2 */}
          {item.key === 'goodsList' && [1].indexOf(Number(item.showMod)) >= 0 && <View className='goods-wrap goods-wrap__two'>
            {item.coverImg && <Image mode="widthFix" src={item.coverImg} className='goods-wrap__cover-img' onClick={() => toAnyPage(item.coverUrl)}/>}
            <View className='goods-wrap__box' style={{ marginTop: `${marginTop}rpx` }}>
              {item.title && <View className='goods-wrap__head d-f a-i-b j-c-b'>
                <View className='goods-wrap__title'>{item.title}</View>
                <View className='goods-wrap__more d-f a-i-c' onClick={() => toAnyPage(item.moreUrl)}>
                  {item.moreName}
                  <View className='bnn-icon'>&#xe866;</View>
                </View>
              </View>}
              <View className='goods-wrap__body'>
                {/* 商品列表 */}
                {item.showMod === 1 && <GoodsOne { ...item }/>}
              </View>
            </View>
          </View>}

          {/* 栅格图片 */}
          {item.key === 'gridImg' && <GridImg { ...item }/>}

          {/*/!* 新闻播报 *!/*/}
          {item.key === 'newsService' && <View className='news-wrap f-g-4' style={{ marginTop: `${marginTop}rpx` }}>
            <Image src={item.img} className='news-wrap__cover-img' onClick={() => toNewsListPage()}/>
            <Swiper autoplay circular vertical skipHiddenItemLayout={true} className='news-wrap__list'>
              {item.list.map((t, k) => {
                // @ts-ignore
                return (<SwiperItem key={k} className='f-g-4' onClick={() => toAnyPage(t.url)} catchtouchmove>
                  <View className='t-o-e'>{t.title}</View>
                </SwiperItem>)
              })}
            </Swiper>
            <View className='bnn-icon'>&#xe866;</View>
          </View>}



          {/* ****************************** 工具组件 ****************************** */}

          {/* 辅助空白 */}
          {item.key === 'blankSpace' && <BlankSpace { ...item }/>}

          {/* 辅助线 */}
          {item.key === 'auxiliaryLine' && <AuxiliaryLine { ...item }/>}
        </View>)
      })}
    </View>)
  }
}
